<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../style.css" media="screen" />
<link rel="stylesheet" href="../../css/product-shop.css" media="screen" />
<title>Home</title>
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<script type="text/javascript">
$(function(){
	$('.product-shop-list ul li').hover(function(){
		var h 	=  $(this).find('img').attr('height');
		$(this).css( {'z-index':3} );
		$(this).find('.img a').stepblur();
		$(this).find('.slide').stop().animate({'top':'-'+h+'px'}, {duration: 400,easing: 'easeInOutBack'});
	},function(){
		$(this).find('.img a').css( {'backgroundPosition': '0 0'} );
		$(this).find('.slide').stop().animate({'top':'0px'}, {duration: 300});
		$(this).css( {'z-index':1} );
	});
});

$.fn.stepblur = function(){
	var obj = $(this);
		var w 	= parseInt(obj.css('width')) ?  parseInt(obj.css('width')) : 0;
		var e = w*2;
		var _w 	= 0;
		setInterval(function ()
		{
			_w = _w + w;
			if(_w>e){
				return false;	
			}
			obj.css( {'backgroundPosition': '-'+_w+'px 0px'} );
		}, 70);
}
</script>
</head>
<body id="shop-page">
<!--$header_html-->
<div id="wrap-container">
<div class="shadow-l"></div>
<div class="shadow-r"></div>
  <div class="content">
    <div class="product-shop-list">
      <ul>
        <li class="box1">
          <p class="img"><a href="/shopping/native/" class="active" >Img</a></p>
          <p class="slide">
          	<a href="/shopping/native/"><img src="../../images/product-shop-list/logo-box1.jpg" alt="" height="38" /></a>
            <a href="http://www.facebook.com/NativeThailand" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>
            </p>
        </li>
        <li class="box2">
          <p class="img"><a href="/shopping/skono/" class="active">Img</a></p>
          <p class="slide">
          	<a href="/shopping/skono/"><img src="../../images/product-shop-list/logo-box2.jpg" alt="" height="75"/></a>
          	<a href="http://www.facebook.com/SkonoThailand.Fanpage" target="_blank" class="fb">Facebook</a>
            <a href="http://www.twitter.com/skonothailand" target="_blank" class="tw">Twitter</a>
          </p>
        </li>
        <li class="box3fix">
          <p class="img"><a href="/shopping/boxfresh/" class="active">Img</a></p>
          <p class="slide">
          <a href="/shopping/boxfresh/"><img src="../../images/product-shop-list/logo-box3.jpg" alt="" height="51" /></a>
          <a href="#" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>
          </p>
        </li>
        <li class="box4">
          <p class="img"><a href="/shopping/kruzin/" class="active">Img</a></p>
          <p class="slide">
          	<a href="/shopping/kruzin/"><img src="../../images/product-shop-list/logo-box4.jpg" alt="" height="42" /></a>
            <a href="#" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>
            </p>
        </li>
        <li class="box5">
          <p class="img"><a href="/shopping/sanuk/" class="active">Img</a></p>
          <p class="slide">
          	<a href="/shopping/sanuk/"><img src="../../images/product-shop-list/logo-box5.jpg" alt="" height="61" /></a>
            <a href="http://www.facebook.com/Sanuk.thailand.fanpage" target="_blank" class="fb">Facebook</a>
            <a href="http://www.twitter.com/sanukthailand" target="_blank" class="tw">Twitter</a>
          </p>
        </li>
        <li class="box6">
          <p class="img"><a href="/shopping/fitflop/" class="active">Img</a></p>
          <p class="slide">
          	<a href="/shopping/fitflop/"><img src="../../images/product-shop-list/logo-box6.jpg" alt="" height="65" /></a>
			<a href="http://www.facebook.com/fanpage.fitflopthailand" target="_blank" class="fb">Facebook</a>
            <a href="http://www.twitter.com/fitflopthailand" target="_blank" class="tw">Twitter</a>
        </p>
        </li>
        <li class="box7">
          <p class="img"><a href="/shopping/sorel/" class="active">Img</a></p>
          <p class="slide">
          <a href="/shopping/sorel/"><img src="../../images/product-shop-list/logo-box7.jpg" alt="" height="85" /></a>
          <a href="#" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>
          </p>
        </li>
        <li class="box8">
          <p class="img"><a href="/shopping/columbia/" class="active">Img</a></p>
          <p class="slide">
          	<a href="/shopping/columbia/"><img src="../../images/product-shop-list/logo-box8.jpg" alt="" height="36" /></a>
          	<a href="http://www.facebook.com/ColumbiaThailand" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>  
          </p>
        </li>
        <li class="box9">
          <p class="img"><a href="/shopping/healthy-back-bag/" class="active">Img</a></p>
          <p class="slide">
          <a href="/shopping/healthy-back-bag/"><img src="../../images/product-shop-list/logo-box9.jpg" alt="" height="85" /></a>
          <a href="#" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>
          </p>
        </li>
        <li class="box10">
          <p class="img"><a href="/shopping/tretron/" class="active">Img</a></p>
          <p class="slide">
          	<a href="/shopping/tretron/"><img src="../../images/product-shop-list/logo-box10.jpg" alt="" height="37" /></a>
            <a href="#" target="_blank" class="fb">Facebook</a>
            <a href="#" target="_blank" class="tw">Twitter</a>  
            </p>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--$footer_html-->
</body>
</html>
